<template>
    <a-card title="人员资料" :bordered="false">
        <!-- Card Header -->
        <template slot="extra">
            <a-form-model layout="inline" @submit.prevent="searchSubmit">
                <a-form-model-item>
                    <a-input v-model="searchForm.code" class="width100"
                             :allowClear="$store.getters.allowClear"
                             placeholder="人员代码"></a-input>
                </a-form-model-item>
                <a-form-model-item>
                    <a-input v-model="searchForm.name" class="width100"
                             :allowClear="$store.getters.allowClear"
                             placeholder="人员名称"></a-input>
                </a-form-model-item>

                <!--部门-->
                <a-form-model-item>
                    <DeptSelect class="width150"
                                :value="searchForm.deptCode"
                                @deptSelectResult="(e)=>{ searchForm.deptCode=e }"
                    />

                </a-form-model-item>

                <!-- 职务-->
                <a-form-model-item>

                    <PositionSelect :code="searchForm.positionCode" class="width120"
                                    :placeholder="'职务岗位'"
                                    @positionSelectResult="(e)=>{ searchForm.positionCode=e ;}"
                    />
                </a-form-model-item>
                <!-- 分组-->
                <a-form-model-item class="width120">
                    <GroupSelect :code="searchForm.groupCode" class="width120"
                                 :placeholder="'标签分组'"
                                 @groupSelectResult="(e)=>{ searchForm.groupCode=e ;}"
                    />
                </a-form-model-item>


                <a-form-model-item>
                    <a-select show-search :placeholder="'状态'" allowClear showSearch v-model="searchForm.status"
                              option-filter-prop="children"
                              style="width: 150px">
                        <a-select-option v-for="(item, index) in StaffStatusOPT" :key="index" :value="item.value">{{
                            item.label }}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>

                <a-form-model-item>
                    <a-button type="primary" html-type="submit">查询</a-button>
                </a-form-model-item>
                <a-form-model-item>
                    <a-button @click="searchRest">重置</a-button>
                </a-form-model-item>

                <a-form-model-item>
                    <a-button icon="plus" type="danger" @click="openEdit()">新建</a-button>
                </a-form-model-item>
            </a-form-model>
        </template>
        <!-- 表格开始 -->
        <a-table bordered :columns="columns" :rowKey="record => record.id" :dataSource="dataSource"


                 :pagination="pagination"
                 :loading="loading"
                 @change="handleTableChange"

        >
            <!--	头像扩展-->
            <template slot="avatar" slot-scope="text,record">
                <a-avatar
                        class="exAvatar"
                        shape="square"
                        size="large"
                        :src="text">{{record.name.substr(0,1)}}
                </a-avatar>
            </template>


            <!-- 状态插槽 -->
            <template slot="status" slot-scope="text, record">
                <a-tag :color="record.status === 'T' ? 'blue' : ''">
                    {{ $exMod.findDict(StaffStatusOPT, record.status) }}
                </a-tag>
            </template>
            <!-- 操作插槽 -->
            <template slot="operation" slot-scope="text, record">


                <a @click="openFingerModal(record)">指纹</a>
                <a-divider type="vertical"/>
                <a @click="openGroupModal(record)">分组</a>
                <a-divider type="vertical"/>


                <a @click="openEdit(record)">编辑</a>
                <a-divider type="vertical"/>
                <a-popconfirm :title="`确定要删除【 ${record.name} 】的档案资料吗?`"
                              @confirm="() => delStaff(record)"><a>删除</a>
                </a-popconfirm>
            </template>


            <!-- 扩展分组标签 -->
            <p slot="expandedRowRender" slot-scope="record" style="margin: 0">
                性别: {{ $exMod.findDict(StaffSexOPT, record.sex) }} 电话:{{ record.phone }} 生日：{{ record.birthday }} 标签:{{
                record.groupName }}

            </p>


        </a-table>
        <EditBox v-if="editShow" @closeFun="closeEdit" :editRecord="editRecord"/>
        <GroupModal v-if="groupModalShow" :staffObj="groupModalStaffObj" @closeModal="closeGroupModal"/>

        <FingerModal v-if="fingerModalShow"

                     :staff="fingerModalStaffObj"
                     @closeModal="closeFingerModal"/>


    </a-card>
</template>
<script>
    import {dictLoad} from '../../../util/internal.api';
    import {pagination, staffTable} from '../public/colums';
    import {staffList, delStaff} from '../public/http';

    export default {
        components: {
            EditBox: () => import('./edit'),
            GroupModal: () => import('./GroupModal'),
            FingerModal: () => import('./FingerModal'),
            //部门ID选择器
            DeptSelect: () => import('../component/DeptSelector'),
            //职务选择器
            PositionSelect: () => import('../component/PositionSelector'),
            //分组选择器
            GroupSelect: () => import('../component/GroupSelector'),
        },
        data() {
            return {
                editShow: false, //打开编辑器
                editRecord: {}, //正在编辑的记录
                groupModalShow: false, //分组Modal的显示状态
                groupModalStaffObj: {}, //分组Modal对应的人员代码

                fingerModalShow: false, //指纹Modal的显示状态
                fingerModalStaffObj: '', //指纹Modal对应的人员对象

                dataSource: [],
                columns: staffTable,
                pagination: {
                    ...pagination
                }, //复制预设的分页参数
                loading: false, //表格loading
                searchForm: {
                    code: '',
                    name: '',
                    sex: '',
                    status: '',
                    deptCode: undefined,
                    positionCode: undefined,
                    groupCode: undefined,

                },
                //系统角色字典
                positionStatusOPT: [], //人员属性字段选项
                StaffSexOPT: [], //性别选项字典
                StaffStatusOPT: [], //人员状态选项字典
            };
        },
        methods: {

            //1.0 获取表格数据
            getTableList() {
                this.loading = true;
                let searchData = this.$exMod.filterObjEmpty(this.searchForm); //删除对象中的空值
                staffList(this.pagination, searchData).then(res => {
                    this.loading = false;
                    if (res.code === 0) {
                        this.dataSource = res.data.result; //表格数据
                        this.pagination.total = res.data.total; //总记录条数
                    }
                });
            },
            //1.2翻页监听
            handleTableChange(pagination) {
                this.pagination.current = pagination.current;
                this.pagination.pageSize = pagination.pageSize;
                this.getTableList();
            },
            //2.0打开编辑器
            openEdit(obj = {}) {
                this.editRecord = obj;
                this.editShow = true;
            },
            //2.1 关闭编辑器
            closeEdit(e) {
                this.editShow = false;
                if (e.render) {
                    this.getTableList();
                }
            },
            //3.0 搜索提交
            searchSubmit() {
                this.pagination.current = 1;
                this.getTableList();
            },
            //重置搜索
            searchRest() {
                this.searchForm = {
                    code: '',
                    name: '',
                    sex: '',
                    status: '',
                    deptCode: undefined,
                    positionCode: undefined,
                    groupCode: undefined,

                };
                this.getTableList();

            },


            //4.0删除人员
            delStaff(record) {
                var _this = this;
                this.loading = true;
                delStaff(record.id).then(res => {
                    console.log(res);
                    if (res.code === 0) {
                        //成功提醒
                        this.$notification.success({
                            message: '操作成功',
                            description: res.message
                        });
                        _this.getTableList();
                    } else {
                        //错误提醒
                        this.$notification.warning(res.message);
                    }
                    this.loading = false;
                });
            },


            //5.0 打开分组设置模态框
            openGroupModal(record) {
                this.groupModalStaffObj = record;
                this.groupModalShow = true;
            },

            //5.1 关闭分组模态框
            closeGroupModal(e) {
                console.log("分组模态框关闭");
                this.groupModalShow = false;

            },


            //6.0 打开分组设置模态框
            openFingerModal(record) {


                this.fingerModalStaffObj = record;
                this.fingerModalShow = true;
            },

            //6.1 关闭分组模态框
            closeFingerModal(e) {
                console.log("关闭指纹管理模块");
                this.fingerModalShow = false;
            },


            //数据初始化
            async init() {
                //性别字典
                await dictLoad('StaffSex').then(res => (this.StaffSexOPT = res));
                //状态
                await dictLoad('StaffStatus').then(res => (this.StaffStatusOPT = res));
                this.getTableList();
            }
        },
        created() {
            this.init();
        }
    };
</script>

<style scoped>

    .width100 {
        width: 100px;
    }

    .width120 {
        width: 120px;
    }

    .width150 {
        width: 150px;
    }

</style>
